<!--
 * @Description: 分类页
 * @Author: rendc
 * @Date: 2023-03-09 14:31:24
 * @LastEditors: 周云海 2779039093@qq.com
 * @LastEditTime: 2023-03-20 23:42:15
-->
<script setup>
import { createApp } from 'vue';
const app = createApp();
</script>

<template>
    <!---头部-->
<div >
    <van-search
    v-model="value"
    shape="round"
    background="#f4f4f4"
    placeholder="请输入商品标题搜索订单"
    />
    
</div>

<!---内容-->
<div>
    <van-tabs v-model:active="active" title-active-color="#0092db">
        <van-tab title="全部"  >
            <!---一个商品-->
        <div>
            <van-cell>
                <template #title>
                    <div><van-icon name="src/assets/dingdan/shangdian.png" size="15"/>&nbsp;智慧家洗衣机...</div>
                </template>
                <template #value>
                    <div style="color: #FF6600;">待支付</div>
                </template>
            </van-cell>
            <van-cell   to="info">
                <template #icon>
                    <van-icon name="src/assets/dingdan/tu1.jpg" size="80"/>
                </template>
                <template #title>
                    <div style="margin-left: 10px;">
                        <div class="van-multi-ellipsis--l2" style="font-size:14px;" >【新品】美的 直排式4KG迷你滚筒式烘干机 干衣机 紫外线除菌 免安装MH40V10E</div>
                        <div style="font-size:12px;margin-top: 20px;color: #999999;">极地白</div>
                    </div>
                </template>
                <template #value>
                    <span style="font-size:14px;">¥899.00</span>
                    <div style="font-size:14px;"><van-tag type="primary" color="#ff6600">会员日</van-tag></div>
                    <div style="font-size:14px;">x1</div>
                </template>
            </van-cell>
            <van-cell>
                <template #value>
                    <div style="color: #333;">共<span>1</span>件，合计：¥<span>899.00</span></div>
                </template>
            </van-cell>
            <van-cell>
                <template #value>
                    <van-button type="primary" size="mini">取消订单</van-button>
                    <van-button type="primary" size="mini">立即支付</van-button>
                </template>
            </van-cell>
        </div>
        <div>
            <van-cell>
                <template #title>
                    <div><van-icon name="src/assets/dingdan/shangdian.png" size="15"/>&nbsp;智慧家洗衣机...</div>
                </template>
                <template #value>
                    <div style="color: #FF6600;">待发货</div>
                </template>
            </van-cell>
            <van-cell   to="info">
                <template #icon>
                    <van-icon name="src/assets/dingdan/tu2.jpg" size="80"/>
                </template>
                <template #title>
                    <div style="margin-left: 10px;">
                        <div class="van-multi-ellipsis--l2" style="font-size:14px;" >美的风尊1.5匹一级能效智能变频冷暖空调 KFR-35GW/N8MXC1 时尚版</div>
                        <div style="font-size:12px;margin-top: 20px;color: #999999;">时尚版/⭐1.5匹</div>
                    </div>
                </template>
                <template #value>
                    <span style="font-size:14px;">¥2999.00</span>
                    <div style="font-size:14px;"><van-tag type="primary" color="#ff6600">官方正品</van-tag></div>
                    <div style="font-size:14px;">x1</div>
                </template>
            </van-cell>
        </div>
        <div>
            <van-cell>
                <template #title>
                    <div><van-icon name="src/assets/dingdan/shangdian.png" size="15"/>&nbsp;智慧家洗衣机...</div>
                </template>
                <template #value>
                    <div style="color: #FF6600;">待收货</div>
                </template>
            </van-cell>
            <van-cell   to="info">
                <template #icon>
                    <van-icon name="src/assets/dingdan/tu3.jpg" size="80"/>
                </template>
                <template #title>
                    <div style="margin-left: 10px;">
                        <div class="van-multi-ellipsis--l2" style="font-size:14px;" >【洗烘套装】小天鹅洗衣机热泵烘干机干衣组合TG100VT86WMAD5+TH100VTH35</div>
                        <div style="font-size:12px;margin-top: 20px;color: #999999;"> 洗烘套装</div>
                    </div>
                </template>
                <template #value>
                    <span style="font-size:14px;">¥6699.00</span>
                    <div style="font-size:14px;"><van-tag type="primary" color="#ff6600">会员日</van-tag></div>
                    <div style="font-size:14px;">x1</div>
                </template>
            </van-cell>
        </div>
            <div style="font-size: 10px;text-align: center;margin-top: 40px;">Copyright @ 1968-2023美的集团股份有限公司</div>
    </van-tab>
    <van-tab title="待付款">
        <div>
            <van-cell>
                <template #title>
                    <div><van-icon name="src/assets/dingdan/shangdian.png" size="15"/>&nbsp;智慧家洗衣机...</div>
                </template>
                <template #value>
                    <div style="color: #FF6600;">待支付</div>
                </template>
            </van-cell>
            <van-cell   to="info">
                <template #icon>
                    <van-icon name="src/assets/dingdan/tu1.jpg" size="80"/>
                </template>
                <template #title>
                    <div style="margin-left: 10px;">
                        <div class="van-multi-ellipsis--l2" style="font-size:14px;" >【新品】美的 直排式4KG迷你滚筒式烘干机 干衣机 紫外线除菌 免安装MH40V10E</div>
                        <div style="font-size:12px;margin-top: 20px;color: #999999;">极地白</div>
                    </div>
                </template>
                <template #value>
                    <span style="font-size:14px;">¥899.00</span>
                    <div style="font-size:14px;"><van-tag type="primary" color="#ff6600">会员日</van-tag></div>
                    <div style="font-size:14px;">x1</div>
                </template>
            </van-cell>
            <van-cell>
                <template #value>
                    <div style="color: #333;">共<span>1</span>件，合计：¥<span>899.00</span></div>
                </template>
            </van-cell>
            <van-cell>
                <template #value>
                    <van-button type="primary" size="mini">取消订单</van-button>
                    <van-button type="primary" size="mini">立即支付</van-button>
                </template>
            </van-cell>
        </div>
        <div style="font-size: 10px;text-align: center;margin-top: 40px;">Copyright @ 1968-2023美的集团股份有限公司</div>
    </van-tab>
    <van-tab title="待发货">
        <div>
            <van-cell>
                <template #title>
                    <div><van-icon name="src/assets/dingdan/shangdian.png" size="15"/>&nbsp;智慧家洗衣机...</div>
                </template>
                <template #value>
                    <div style="color: #FF6600;">待发货</div>
                </template>
            </van-cell>
            <van-cell   to="info">
                <template #icon>
                    <van-icon name="src/assets/dingdan/tu2.jpg" size="80"/>
                </template>
                <template #title>
                    <div style="margin-left: 10px;">
                        <div class="van-multi-ellipsis--l2" style="font-size:14px;" >美的风尊1.5匹一级能效智能变频冷暖空调 KFR-35GW/N8MXC1 时尚版</div>
                        <div style="font-size:12px;margin-top: 20px;color: #999999;">时尚版/⭐1.5匹</div>
                    </div>
                </template>
                <template #value>
                    <span style="font-size:14px;">¥2999.00</span>
                    <div style="font-size:14px;"><van-tag type="primary" color="#ff6600">官方正品</van-tag></div>
                    <div style="font-size:14px;">x1</div>
                </template>
            </van-cell>
            <div style="font-size: 10px;text-align: center;margin-top: 40px;">Copyright @ 1968-2023美的集团股份有限公司</div>
        </div>
    </van-tab>
    <van-tab title="待收货">
        <div>
            <van-cell>
                <template #title>
                    <div><van-icon name="src/assets/dingdan/shangdian.png" size="15"/>&nbsp;智慧家洗衣机...</div>
                </template>
                <template #value>
                    <div style="color: #FF6600;">待收货</div>
                </template>
            </van-cell>
            <van-cell   to="info">
                <template #icon>
                    <van-icon name="src/assets/dingdan/tu3.jpg" size="80"/>
                </template>
                <template #title>
                    <div style="margin-left: 10px;">
                        <div class="van-multi-ellipsis--l2" style="font-size:14px;" >【洗烘套装】小天鹅洗衣机热泵烘干机干衣组合TG100VT86WMAD5+TH100VTH35</div>
                        <div style="font-size:12px;margin-top: 20px;color: #999999;"> 洗烘套装</div>
                    </div>
                </template>
                <template #value>
                    <span style="font-size:14px;">¥6699.00</span>
                    <div style="font-size:14px;"><van-tag type="primary" color="#ff6600">会员日</van-tag></div>
                    <div style="font-size:14px;">x1</div>
                </template>
            </van-cell>
            <div style="font-size: 10px;text-align: center;margin-top: 40px;">Copyright @ 1968-2023美的集团股份有限公司</div>
        </div>
    </van-tab>
    <van-tab title="待评价">
        <div style="text-align: center; margin-top: 3%;">暂无相关订单~</div>

        <div style="font-size: 10px;text-align: center;margin-top: 40px;">Copyright @ 1968-2023美的集团股份有限公司</div>
    </van-tab>
</van-tabs>
</div>


</template>
